"use client";
import { useRouter } from "@/i18n";
import { FC, PropsWithChildren, useRef, useState } from "react";
import "./page.scss";

interface Props {}

const App: FC<PropsWithChildren<Props>> = (props) => {
    const router: any = useRouter();
    const goPage = (path = "") => {
        if (path) {
            if (path === "home") {
                router.replace("/");
                return;
            }

            // console.log(router);

            router.replace(`/affiliate/${path}`);
            return;
        }
        router.back();
    };
    const sliderRef = useRef<HTMLDivElement>(null);
    const [num, setNum] = useState(100);
    const [money, setMoney] = useState("5000");
    const handleSlide: any = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
        if (sliderRef.current) {
            const startX = sliderRef.current.getBoundingClientRect().x;
            const x = e.clientX - startX;
            const xRem = x / (144 * 0.6);
            const intNum = Math.round(10000 * xRem) - Math.round((10000 * xRem) % 10);
            setNum(intNum);
            const m = intNum * 50;
            let r = "";
            const arr = m.toString().split("");
            arr.forEach((item, i) => {
                if (i !== arr.length && (arr.length - i - 1) % 3 === 0) {
                    r += item + ",";
                } else {
                    r += item;
                }
            });

            setMoney(r);
            const scale = (Math.round(xRem * 10000) / 100.0).toFixed(2) + "%";
            sliderRef.current.style.width = scale;
        }
    };
    return (
        <div className="vux-drawer-summary">
            <div className="vux-drawer-body" style={{ transform: "translate3d(0px,0px,0px)" }}>
                <div
                    className="referral router-view"
                    id="id-router-view"
                    style={{ backgroundColor: "rgb(237, 237, 237)" }}
                >
                    <div className="headerBack">
                        <div className="left" onClick={() => goPage()}>
                            <span className="iconfont icon-xiangzuo1" />
                        </div>
                        <div className="title">
                            Afiliado
                            <span> - Ganhe R$ 10.000 por dia</span>
                        </div>
                        <div className="right" onClick={() => goPage("home")}>
                            <span className="iconfont icon-company_nav_icon_home router-link-active" />
                        </div>
                    </div>
                    <div className="tabs alginLeft van-tabs van-tabs--line">
                        <div className="van-tabs__wrap van-tabs__wrap--scrollable">
                            <div
                                role="tablist"
                                className="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
                            >
                                <div
                                    role="tab"
                                    className="van-tab van-tab--active"
                                    aria-selected="true"
                                    onClick={() => goPage("summary")}
                                >
                                    <span className="van-tab__text">PAINEL</span>
                                </div>
                                <div
                                    role="tab"
                                    className="van-tab"
                                    onClick={() => goPage("referrals")}
                                >
                                    <span className="van-tab__text">REFERÊNCIAS</span>
                                </div>
                                <div
                                    role="tab"
                                    className="van-tab"
                                    onClick={() => goPage("report")}
                                >
                                    <span className="van-tab__text">RELATÓRIO</span>
                                </div>
                                <div
                                    role="tab"
                                    className="van-tab"
                                    onClick={() => goPage("payments")}
                                >
                                    <span className="van-tab__text">PAGAMENTOS</span>
                                </div>
                                <div role="tab" className="van-tab" onClick={() => goPage("faq")}>
                                    <span className="van-tab__text">FAQ</span>
                                </div>
                                <div role="tab" className="van-tab">
                                    <span className="van-tab__text">TUTORIAL</span>
                                </div>
                                <div className="van-tabs__line"></div>
                            </div>
                        </div>
                    </div>
                    <div className="content">
                        <div className="summary referral-router-view">
                            <div className="content">
                                <div className="title">
                                    <div>
                                        {" "}
                                        Hoje
                                        <span className="iconfont icon-bangzhu" />
                                    </div>
                                </div>
                                <div className="cardMian">
                                    <div>
                                        <ul className="today">
                                            <li>
                                                <span className="num">0</span>
                                                <span> Inscrições </span>
                                            </li>
                                            <li>
                                                <span className="num">0</span>
                                                <span> Novos jogadores </span>
                                            </li>
                                            <li>
                                                <span className="num">0</span>
                                                <span> Aposta válidas em equipe </span>
                                            </li>
                                            <li>
                                                <span className="num">0</span>
                                                <span> Comissão </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div className="content">
                                <div className="title">
                                    <div>
                                        {" "}
                                        Total
                                        <span className="iconfont icon-bangzhu" />
                                    </div>
                                </div>
                                <div className="cardMian">
                                    <div>
                                        <ul className="total">
                                            <li>
                                                <span className="num">0</span>
                                                <span> Inscrições </span>
                                            </li>
                                            <li>
                                                <span className="num">0</span>
                                                <span> Jogadores totais </span>
                                            </li>
                                            <li>
                                                <span className="num">0</span>
                                                <span> Aposta válidas total </span>
                                            </li>
                                            <li>
                                                <span className="num">0</span>
                                                <span> Comissão </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div className="content">
                                <div className="title">
                                    <div>
                                        {" "}
                                        Comissão
                                        <span className="iconfont icon-bangzhu" />
                                    </div>
                                </div>
                                <div className="cardMian">
                                    <div className="vip">
                                        <div className="level">
                                            <span className="iconfont icon-vip"></span>
                                            <span className="levelNum">1</span>
                                        </div>
                                        <div>
                                            Nível de Agente
                                            <span className="iconfont icon-tishi"></span>
                                        </div>
                                    </div>
                                    <div>
                                        <ul className="commission">
                                            <li>
                                                <span className="num">
                                                    <span>R$</span>
                                                    <span className="cash">0.00</span>
                                                </span>
                                                <span> Total pago </span>
                                            </li>
                                            <li>
                                                <span className="num">
                                                    <span>R$</span>
                                                    <span className="cash">0.00</span>
                                                </span>
                                                <span> Não pago </span>
                                            </li>
                                        </ul>
                                        <div className="wallet">
                                            <div className="btn"> TRANSFERIR PARA A CARTEIRA </div>
                                            <div className="tip">
                                                <span className="iconfont icon-tishi1"></span>
                                                Valor mínimo de transferência de 10 BRL
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="content shareMain">
                                <div className="title">Compartilhe com sua comunidade social</div>
                                <div className="share">
                                    <ul className="sharePlatform">
                                        <li>
                                            <a href="">
                                                <img src="/img/facebook.webp" alt="" />
                                            </a>
                                            <span>Facebook</span>
                                        </li>
                                        <li>
                                            <a href="">
                                                <img src="/img/WhatsApp.webp" alt="" />
                                            </a>
                                            <span>WhatsApp</span>
                                        </li>
                                        <li>
                                            <a href="">
                                                <img src="/img/Telegram.png" alt="" />
                                            </a>
                                            <span>Telegram</span>
                                        </li>
                                        <li>
                                            <a href="">
                                                <img src="/img/Twitter.webp" alt="" />
                                            </a>
                                            <span>Twitter</span>
                                        </li>
                                        <li>
                                            <a href="">
                                                <img src="/img/email.webp" alt="" />
                                            </a>
                                            <span>Email</span>
                                        </li>
                                    </ul>
                                </div>
                                <div className="shareLink">
                                    <div className="tip">
                                        Compartilhe este link de indicação com seus amigos
                                    </div>
                                    <div className="copyUrl">
                                        <span className="url omitWrap">
                                            https://www.9f.com/br/m/r/xxxxxx
                                        </span>
                                        <span id="copy">Cópia</span>
                                    </div>
                                </div>
                            </div>
                            <div className="content">
                                <div className="title">
                                    <div>
                                        {" "}
                                        Grupo CHAT entre agentes por telegram oficial do 9F.COM{" "}
                                    </div>
                                </div>
                                <div>
                                    <div className="tel-box">
                                        <a href="" className="telicon">
                                            <img src="/img/telegram.webp" alt="" />
                                        </a>
                                        <div className="hintTitle3">
                                            Clique o botão de ícone no lado esquerdo, junte-se ao
                                            nosso grupo afiliado do TG oficial Vamos oferecer- lo as
                                            palavras afiliadas profissionais e as ferramentas
                                            afiliadas profissionais. E ajudar-lo obter bem os
                                            benefícios reais.
                                        </div>
                                    </div>
                                    <div className="hintTitle2">
                                        <i className="iconfont icon-tishi"></i>
                                        Se você tem um grande público e seguidores. Temos condições
                                        especiais para você personalizar seu programa de indicações!
                                        para mais detalhes, por favorcontate- nos:
                                        <a
                                            href=""
                                            style={{
                                                borderBottom: "1px solid rgb(109, 155, 195)",
                                                color: "#0000EE",
                                            }}
                                        >
                                            business@9f.com
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div className="content">
                                <div className="title">
                                    <div>
                                        Regras de recompensas por comissão‰
                                        <span className="iconfont icon-bangzhu"></span>
                                    </div>
                                </div>
                                <div className="hint">
                                    <div className="hintTitle">
                                        Ganhe dinheiro indicando amigos para o 9F.COM, você ganha
                                        mais de 80% em recompensas de comissão!
                                    </div>
                                    <div className="imgContent">
                                        <img src="/img/cash.png" alt="" />
                                        <div>
                                            Número de indicações &gt; {num}
                                            <br />
                                            Comissão &gt; R$ {money} todo mês!
                                        </div>
                                        <div
                                            className="slider van-slider"
                                            style={{ height: "0.02rem" }}
                                            onClick={handleSlide}
                                        >
                                            <div
                                                className="van-slider__bar"
                                                style={{
                                                    width: "0.900901%",
                                                    background: "rgb(0, 157, 128)",
                                                }}
                                                ref={sliderRef}
                                            >
                                                <div
                                                    role="slider"
                                                    className="van-slider__button-wrapper"
                                                >
                                                    <div className="img"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="relationSchema">
                                        <div className="groupTitle">
                                            Unlimited development of subordinates
                                        </div>
                                        <img src="/img/group_br.webp" alt="" className="groupImg" />
                                        <ul className="rules">
                                            <li>
                                                Você receberá uma porcentagem de comissão diferente
                                                toda vez que um jogador indicado por você fizer uma
                                                aposta,
                                                <span style={{ color: "red" }}>
                                                    ganhar ou perder
                                                </span>
                                                .
                                            </li>
                                            <li>O sistema calcula a comissão a cada 3 minutos.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div className="content"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default App;